<%@ page language="java"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <title>工序模板</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>js/bootstrap-3.3.6/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/bootstrapValidator.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/mydialog.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css"/>
    <script type="text/javascript" src="<%=basePath%>js/common/jquery-2.1.0.js" charset="utf-8"></script>

    <script type="text/javascript" src="<%=basePath%>js/common/dialog.3.1.min.js"></script>

<body>
<div id="index-hav2">
    <div class="index-hav-right" id="index-hav-right-clear">
        <div class="row">
            <div class="col-md-9">
                <span id="icon-house"> </span><span>首页</span>
                <span>></span><span>系统管理</span>
                <span>></span><span>工序模板</span>
            </div>
            <div class="bank-box">

                <div class="col-md-12" style="border:0px solid red">
                    <form role="form" action="<%=path%>/system/workingProcedureTemplate/updateOrAdd/template"
                          id="defaultForm" method="post">
                        <div class="panel panel-default center" style="border:0px solid red">
                            <div class="panel-body" style="border:0px solid red;margin-left: 20px;">

                                <div class="form-group" style="border: 0px solid red;width: 50%;margin-left: 20px;">
                                    <div style="width:30%;float: left">
                                        <b>难易度:</b>
                                        <select class="form-control" id="levels">
                                            <option value="S">S</option>
                                            <option value="A">A</option>
                                            <option value="B">B</option>
                                            <option value="C">C</option>
                                        </select>
                                    </div>

                                    <div style="width:30%;float: left">
                                        <b>次型:</b>
                                        <select class="form-control" id="types">
                                            <option value="1">1次型</option>
                                            <option value="2">2次型</option>
                                        </select>
                                    </div>
                                </div>

                                <table class="textTable center" id="mbTable"
                                       style="border:0px solid blue;width:90%;margin-left: 50px;">
                                    <thead>
                                    <tr>
                                        <th class="platform-start">序号</th>
                                        <th class="platform-start">工序名称</th>
                                        <th class="platform-start">工序精度</th>
                                        <th class="platform-start">参考耗时</th>
                                        <th class="platform-start">预计耗时</th>
                                        <th class="platform-start">耗时单位</th>
                                        <th class="platform-start">上移</th>
                                        <th class="platform-start">下移</th>
                                        <th class="platform-start">删除</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>

                                </table>

                                <div class="col-sm-8 col-btn-12"
                                     style="width: 80%; border: 0px solid red;margin:10px 70px;">

                                    <button type="button" class="search-form-btn-s btn btn-info"
                                            onclick="addMode()">
                                        添加＋
                                    </button>
                                    <button type="submit" class="search-form-btn-s btn btn-primary"
                                            onclick="levelAndType()">提交
                                    </button>
                                    <button type="button" class="btn btn-default"
                                            onclick="window.location.href='<%=path%>/system/workingProcedureTemplate/template/list'">
                                        返回
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div id="gray-screen"></div>
</div>
</body>
<script type="text/javascript" src="<%=basePath%>js/validate/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/rem.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>js/validate/bootstrapValidator.js"></script>
<script type="text/javascript" src="<%=basePath%>js/validate/zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrap-3.3.6/dist/js/bootstrap.min.js" charset="utf-8"></script>
<%--<script type="text/javascript" src="/js/template.js"></script>--%>
<script type="text/javascript">
    function levelAndType() {
        var level = $("#levels").val();
        var type = $("#types").val();
        var tabNode = document.getElementById("mbTable");
        var x = tabNode.rows.length;
        //将所有的都赋值为选中的
        for (var i = 1; i < x; i++) {
            $("#level" + i).val(level);
            $("#type" + i).val(type);
        }
    }

    //初始化表
    var tables = $("#mbTable");
    var tabsize = document.getElementById("mbTable");
    for (var x = 1; x < 15; x++) {
        var shang = '';
        var xia = '';
        if (x != 1) {
            shang = '↑';
        }
        if (x != 14) {
            xia = '↓';
        }
        var test = '';
        if (x == 1) {
            test = 'GO1';
        } else if (x == 2) {
            test = '设计+检图';
        }
        else if (x == 3) {
            test = '铸件';
        } else if (x == 4) {
            test = 'GO2';
        } else if (x == 5) {
            test = '加工阶段';
        } else if (x == 6) {
            test = 'T1阶段';
        } else if (x == 7) {
            test = 'T2阶段';
        } else if (x == 8) {
            test = 'T3阶段';
        } else if (x == 9) {
            test = '出货准备';
        } else if (x == 10) {
            test = '出货';
        } else if (x == 11) {
            test = 'LT1阶段';
        } else if (x == 12) {
            test = 'LT2阶段';
        } else if (x == 13) {
            test = 'LT3阶段';
        } else if (x == 14) {
            test = 'LT交付';
        }
        var sc_trbegin = '<tr id="shan' + x + '">';
        var sc_sortNum = '<td><input name="sortNum' + x + '" id="sortNum' + x + '" value="' + x + '" type="hidden"><b id="sequence' + x + '"> ' + x + '</b>  </td>';
        var sc_code = '<th><input type="text" class="form-control" name="code' + x + '"value="' + test + '" id="code' + x + '" /></th>';
        var sc_name = '<th><input type="text" class="form-control" name="name' + x + '" id="name' + x + '" /></th>';
        var sc_referenceDate = '<th><input type="text" class="form-control" name="referenceDate' + x + '" value="0" id="referenceDate' + x + '" onkeyup="value=value.replace(/[^\\d.]/g,\'\')" onblur="value=value.replace(/[^\\d.]/g,\'\')" /></th>';
        var sc_defTime = '<th><input type="text" class="form-control" name="defTime' + x + '" value="0" id="defTime' + x + '" onkeyup="value=value.replace(/[^\\d.]/g,\'\')" onblur="value=value.replace(/[^\\d.]/g,\'\')" /></th>';
        var sc_defTimeUnit = '<th><select class="form-control input-sm mb15" name="defTimeUnit' + x + '" id="defTimeUnit' + x + '">  <option value="天">天</option>  <option value="分">分</option><option value="秒">秒</option><option value="小时">小时</option><option value="月">月</option> <option value="年">年</option>  </select> </th>';
        var sc_hidden = '<input type="hidden" class="form-control" value="A" name="level' + x + '" id="level' + x + '"/> <input type="hidden" class="form-control" value="1" name="type' + x + '" id="type' + x + '"/>';
        var sc_shangyi = '<th><a id="shang' + x + '" style="cursor:pointer;" onclick="shangyi(' + x + ')">' + shang + '</a></th>';
        var sc_xiayi = '<th><a onclick="xiayi(' + x + ')" style="cursor:pointer;"><b id="xiaId' + x + '">' + xia + '</b></a></th>';
        var sc_delRow = '<th><a style="cursor:pointer;" onclick="delRow(this)">✘</a></th>';
        var sc_trend = '</tr>';

        tables.append(sc_trbegin + sc_sortNum + sc_code + sc_name + sc_referenceDate + sc_defTime + sc_defTimeUnit + sc_hidden + sc_shangyi + sc_xiayi + sc_delRow + sc_trend);
    }

    function addMode() {
        var tables = $("#mbTable");
        var tabNode = document.getElementById("mbTable");
        var x = tabNode.rows.length;
        var shang = '';
        var xia = '';
        if (x != 1) {
            shang = '↑';
        }
        var xianum = x - 1;
        $("#xiaId" + xianum).text("↓");
        tables.append('<tr id="shan' + x + '"> <td><input name="sortNum' + x + '" id="sortNum' + x + '" value="' + x + '" type="hidden"><b id="sequence' + x + '"> ' + x + '</b>  </td> <th><input type="text" class="form-control" name="code' + x + '" id="code' + x + '" /></th> <th><input type="text" class="form-control" name="name' + x + '" id="name' + x + '" /></th><th><input type="text" class="form-control" name="referenceDate' + x + '" value="0" id="referenceDate' + x + '" onkeyup="value=value.replace(/[^\\d.]/g,\'\')" onblur="value=value.replace(/[^\\d.]/g,\'\')" /></th> <th><input type="text" class="form-control" name="defTime' + x + '" value="0" id="defTime' + x + '" onkeyup="value=value.replace(/[^\\d.]/g,\'\')" onblur="value=value.replace(/[^\\d.]/g,\'\')" /></th>  <th><select class="form-control input-sm mb15" name="defTimeUnit' + x + '" id="defTimeUnit' + x + '">  <option value="天">天</option>  <option value="分">分</option><option value="秒">秒</option><option value="小时">小时</option><option value="月">月</option> <option value="年">年</option>  </select> </th> <input type="hidden" class="form-control" value="A" name="level' + x + '" id="level' + x + '"/>  <input type="hidden" class="form-control" value="1" name="type' + x + '" id="type' + x + '"/> <th><a id="shang' + x + '" style="cursor:pointer;" onclick="shangyi(' + x + ')">' + shang + '</a></th> <th><a onclick="xiayi(' + x + ')" style="cursor:pointer;"><b id="xiaId' + x + '">' + xia + '</b></a></th> <th><a style="cursor:pointer;" onclick="delRow(this)">✘</a></th></tr>');
    }

    function xiayi(x) {
        //下移动
        var code = $("#code" + x).val();
        var name = $("#name" + x).val();
        var defTime = $("#defTime" + x).val();
        var defTimeUnit = $("#defTimeUnit" + x).val();
        var level = $("#level" + x).val();//难易度
        var type = $("#type" + x).val();//type
        var referenceDate = $("#referenceDate" + x).val();//参考耗时

        var sele = document.getElementById("defTimeUnit" + x);
        var selelevel = document.getElementById("level" + x);
        var seletype = document.getElementById("type" + x);

        var index = x + 1;
        var upcode = $("#code" + index).val();
        var upname = $("#name" + index).val();
        var updefTime = $("#defTime" + index).val();
        var uplevel = $("#level" + index).val();//难易度
        var uptype = $("#type" + index).val();//type
        var upreferenceDate = $("#referenceDate" + index).val();//参考耗时

        var updefTimeUnit = $("#defTimeUnit" + index).val();
        var upsele = document.getElementById("defTimeUnit" + index);
        var upselelevel = document.getElementById("level" + index);
        var upseletype = document.getElementById("type" + index);

        $("#code" + x).val(upcode);
        $("#name" + x).val(upname);
        $("#defTime" + x).val(updefTime);
        $("#referenceDate" + x).val(upreferenceDate);
        for (i = 0; i < sele.length; i++) {//给select赋值
            if (updefTimeUnit == sele.options[i].text) {
                sele.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < selelevel.length; i++) {//给select赋值
            if (uplevel == selelevel.options[i].text) {
                selelevel.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < seletype.length; i++) {//给select赋值
            if (uptype == seletype.options[i].text) {
                seletype.selectedIndex = i;
                break;
            }
        }

        $("#code" + index).val(code);
        $("#name" + index).val(name);
        $("#defTime" + index).val(defTime);
        $("#referenceDate" + index).val(referenceDate);

        for (i = 0; i < upsele.length; i++) {//给select赋值
            if (defTimeUnit == upsele.options[i].text) {
                upsele.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < upselelevel.length; i++) {//给select赋值
            if (level == upselelevel.options[i].text) {
                upselelevel.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < upseletype.length; i++) {//给select赋值
            if (type == upseletype.options[i].text) {
                upseletype.selectedIndex = i;
                break;
            }
        }
    }

    function shangyi(x) {
        var code = $("#code" + x).val();
        var name = $("#name" + x).val();
        var defTime = $("#defTime" + x).val();
        var defTimeUnit = $("#defTimeUnit" + x).val();
        var level = $("#level" + x).val();//难易度
        var type = $("#type" + x).val();//type
        var referenceDate = $("#referenceDate" + x).val();//参考耗时

        var sele = document.getElementById("defTimeUnit" + x);
        var selelevel = document.getElementById("level" + x);
        var seletype = document.getElementById("type" + x);

        var index = x - 1;
        var upcode = $("#code" + index).val();
        var upname = $("#name" + index).val();
        var updefTime = $("#defTime" + index).val();
        var uplevel = $("#level" + index).val();//难易度
        var uptype = $("#type" + index).val();//type
        var upreferenceDate = $("#referenceDate" + index).val();//参考耗时

        var updefTimeUnit = $("#defTimeUnit" + index).val();
        var upsele = document.getElementById("defTimeUnit" + index);
        var upselelevel = document.getElementById("level" + index);
        var upseletype = document.getElementById("type" + index);

        $("#code" + x).val(upcode);
        $("#name" + x).val(upname);
        $("#defTime" + x).val(updefTime);
        $("#referenceDate" + x).val(upreferenceDate);
        for (i = 0; i < sele.length; i++) {//给select赋值
            if (updefTimeUnit == sele.options[i].text) {
                sele.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < selelevel.length; i++) {//给select赋值
            if (uplevel == selelevel.options[i].text) {
                selelevel.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < seletype.length; i++) {//给select赋值
            if (uptype == seletype.options[i].text) {
                seletype.selectedIndex = i;
                break;
            }
        }

        $("#code" + index).val(code);
        $("#name" + index).val(name);
        $("#defTime" + index).val(defTime);
        $("#referenceDate" + index).val(referenceDate);
        for (i = 0; i < upsele.length; i++) {//给select赋值
            if (defTimeUnit == upsele.options[i].text) {
                upsele.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < upselelevel.length; i++) {//给select赋值
            if (level == upselelevel.options[i].text) {
                upselelevel.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < upseletype.length; i++) {//给select赋值
            if (type == upseletype.options[i].text) {
                upseletype.selectedIndex = i;
                break;
            }
        }
    }

    //这里的code为工序名,name为工序精度
    //删除行
    function delRow(id) {
        //得到当前所在行
        var tabNode = document.getElementById("mbTable");

        if (tabNode == null) {
            return;//就不用执行以下的代码了
        }
        $(id).parent().parent().remove();
        var num = tabNode.rows.length;
        $.ajax({
            type: "post",
            url: "<%=path%>/system/workingProcedureTemplate/temp/template",
            data: $('#defaultForm').serialize(),
            dataType: "json",
            success: function (data) {
                $("#mbTable tbody").html("");//先清除
                var tempsize = data.tempTemplate.length;
                for (var i = 0; i < tempsize; i++) {
                    var x = i + 1;
                    var shang = '';
                    var xia = '';
                    if (x != 1) {
                        shang = '↑';
                    }
                    if (x != tempsize) {
                        xia = '↓';
                    }
                    var code = data.tempTemplate[i].name;
                    var name = data.tempTemplate[i].precisionNum;
                    var defTime = data.tempTemplate[i].defTime;
                    var defTimeUnit = data.tempTemplate[i].defTimeUnit;
                    var level = data.tempTemplate[i].level;
                    var type = data.tempTemplate[i].type;
                    var referenceDate = data.tempTemplate[i].referenceDate;
                    //这里的code为工序名,name为工序精度
                    tables.append('<tr id="shan' + x + '"> <td><input name="sortNum' + x + '" id="sortNum' + x + '" value="' + x + '" type="hidden"><b id="sequence' + x + '"> ' + x + '</b>  </td> <td><input type="text" class="form-control" name="code' + x + ' "value="' + code + '" id="code' + x + '"/></td> <td><input type="text" class="form-control" name="name' + x + '" value="' + name + '" id="name' + x + '" required/></td><td><input type="text" class="form-control" name="referenceDate' + x + '" value="' + referenceDate + '" id="referenceDate' + x + '" onkeyup="value=value.replace(/[^\\d.]/g,\'\')" onblur="value=value.replace(/[^\\d.]/g,\'\')" /></td> <td><input type="text" class="form-control" name="defTime' + x + '" value="' + defTime + '" id="defTime' + x + '" onkeyup="value=value.replace(/[^\\d.]/g,\'\')" onblur="value=value.replace(/[^\\d.]/g,\'\')" /></td>  <td><select class="form-control input-sm mb15" name="defTimeUnit' + x + '" id="defTimeUnit' + x + '">  <option value="天">天</option>  <option value="分">分</option><option value="秒">秒</option><option value="小时">小时</option><option value="月">月</option> <option value="年">年</option>  </select> </td> <input type="hidden" class="form-control input-sm mb15" name="level' + x + '" id="level' + x + '"/>  <input type="hidden" class="form-control input-sm mb15" name="type' + x + '" id="type' + x + '"/> <td><a id="shang' + x + '" style="cursor:pointer;" onclick="shangyi(' + x + ')">' + shang + '</a></td> <td><a onclick="xiayi(' + x + ')" style="cursor:pointer;"><b id="xiaId' + x + '">' + xia + '</b></a></td> <td><a style="cursor:pointer;" onclick="delRow(this)">✘</a></td></tr>');
                    $("#defTimeUnit" + x).val(defTimeUnit);
                    $("#level" + x).val(level);
                    $("#type" + x).val(type);
                }
            }
        });
    }
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {}
        }).on('success.form.bv', function (e) {
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function (result) {

                if (result.message != undefined) {
                    var code = result.code;
                    var grayScreen = document.getElementById("gray-screen");
                    Dialog({
                        "msg": '<div class="D_alert">' + result.message + '</div>',
                        "title": "提示",
                        "showButtons": true,
                        "cancelButton": false,
                        "onComplete": function () {
                            if (code != 1) {
                                $("body").empty();
                                window.location.href = '<%=path%>/system/workingProcedureTemplate/template/list';
                            }
                        }
                    });
                } else {
                    window.location.href = '<%=path%>/system/workingProcedureTemplate/template/list';
                }
            }, 'json');
        });

        //清空搜索条件
        $(".clearForm").click(function () {
            $("#form").find("input").val("");
        });
    });
</script>
</html>